<!--
 * @Description: answerQuestionlist - 笔记答疑详情
 * @Author: your name
 * @Date: 2024-02-26
 * @LastEditTime: 2024-02-26
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="heart_w answeringQuestion">
    <div class="contentbox">
      <ul class="list_box">
        <li v-for="item in problemList" :key="item.id">
          <a :href="`#/newzhike/answerQuestion_detail`">
            <div class="left_box">
              <img :src="item.avatar" alt="" />
            </div>
            <div class="text_box">
              <div class="text_title">
                <p class="nickname_listbi">{{ item.nickname }}</p>
                <span class="time_listbi">{{ item.createtime }}</span>
                <div
                  class="from_listbi"
                  style="display: inline-block; margin-left: 10px"
                >
                  来源于
                  <div style="display: inline-block; color: #8a919f">
                    {{ item.cate_name }}
                  </div>
                </div>
              </div>
              <p class="text_content">{{ item.title }}</p>
            </div>
          </a>
        </li>
      </ul>
    </div>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      background
      :page-sizes="[5, 10, 15, 18]"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getQuestionListByZhike } from '@/api/answerQuestion'
export default {
  name: 'answerQuestionlist',
  data() {
    return {
      total: 1,
      currentPage: 1, // 当前页码默认值为1
      pageSize: 10, // 每页显示条数默认值为10
      problemList: []
    }
  },
  created() {
    this.getProblem()
  },
  methods: {
    getProblem() {
      let params_pl = {
        type: 'all', // my 我的 all 全网
        page: 1,
        chapter_id: 1,
        subject_id: 1,
        cate_id: 1,
        combo_id: 1 // 课程ID
      }
      getQuestionListByZhike(params_pl).then(({ data: data }) => {
        this.problemList = data.data.list
        console.log(data)
      })
    },
    //切换分页大小
    handleSizeChange(size) {
      this.pageSize = size
      // 调用函数
      this.pdfData(this.phaseId, this.rankId)
    },

    //切换分页
    handleCurrentChange(current) {
      this.currentPage = current
      console.log('当前页', current)
      this.pdfData(this.phaseId, this.rankId)
    }
  }
}
</script>

<style scoped lang="scss">
.answeringQuestion {
  margin: 80px auto;
  box-sizing: border-box;

  .contentbox {
    width: 100%;
    position: relative;
    padding-bottom: 50px;

    .list_box {
      width: 100%;
      border-radius: 4px;
      padding: 20px 20px 0;
      position: relative;

      li {
        padding: 20px 10px;
        border-bottom: 1px dashed #8a919f;
        a {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;

          .left_box {
            width: 50px;
            height: 50px;
            border-radius: 20px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 20px;
            }
          }

          .text_box {
            width: calc(100% - 60px);

            .nickname_listbi {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 700;
              color: #0193ff;
              padding-right: 10px;
            }

            .time_listbi {
              font-size: 14px;
              font-weight: 400;
              color: #8a919f;
            }
          }
        }
      }
    }
  }
}
</style>
